<template>
  <div id="new" class="mt24 mb24">
    <!-- 无通知 -->
    <!-- <div class="empty">
      <p class="pt157">暂无任何服务通知！</p>
    </div>-->
    <div class="message-list">
      <li class="message-item" v-for="(value,index) in message" :key="index">
        <div class="message-image">
          <img :src="value.imgUrl" />
        </div>
        <dl class="message-inner">
          <dt class="message-name">{{value.title}}</dt>
          <dd class="message-description">
            <p>
              {{value.content}}
            </p>
          </dd>
        </dl>
        <p class="message-time">{{value.createDate}}</p>
      </li>
    </div>
    <!-- <div class="page" v-if="message.length >=3 ">
      <el-pagination :page-size="20" :pager-count="11" layout="prev, pager, next" :total="1000"></el-pagination>
    </div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: [
      ]
    };
  },
  mounted(){
    this.axios.post("/userMsg/new",{
      "pageSize":100,
      "currentPage":1,
    }).then((resp)=>{
      this.message = resp.data.records
    })
  },
};
</script>

<style scoped>
#new {
  min-height: 525px;
}

/* 内容 */
.empty {
  height: 100%;
}

.message-item {
  overflow: hidden;
  border-bottom: 1px dotted #d0d6d6;
  padding: 12px;
  position: relative;
}
.message-image,
.message-inner,
.notice-time {
  display: inline;
  float: left;
}
.message-image {
  position: relative;
}
.message-image img {
  width: 132px;
  height: 132px;
  border: 0;
  /* background-color: deepskyblue; */
}
.message-inner {
  width: 490px;
  overflow: hidden;
  margin-left: 20px;
  /* background-color: deeppink; */
}
.message-name {
  padding: 12px 0;
  font-size: 14px;
  text-align: left;
}
.message-description {
  font-size: 13px;
  line-height: 24px;
}
.message-description p {
  text-align: left;
}
.message-time {
  font-size: 12px;
  color: #c3c3c3;
  padding-left: 130px;
  padding-top: 12px;
}

/* 分页 */
.page {
  margin: 20px 0 40px;
}
</style>
